<template>
  <div>
    <svg
      class="rtext"
      id="图层_1"
      data-name="图层 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1605.27 743.34"
    >
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text
        class="cls-2"
        transform="matrix(0.9, 0.31, -0.01, 1, 670.07, 162.97)"
      >
        关系
      </text>
      <text
        class="cls-3"
        transform="matrix(0.92, 0.32, -0.01, 1, 698.07, 172.97)"
      >
        型
      </text>
      <text
        class="cls-4"
        transform="matrix(0.83, 0.32, -0.03, 1, 973.94, 268.54)"
      >
        文档型
      </text>
      <text
        class="cls-5"
        transform="matrix(0.9, 0.31, -0.02, 1, 1150.32, 330.87)"
      >
        融合型
      </text>
      <text
        class="cls-2"
        transform="matrix(0.92, 0.31, -0.01, 1, 1320.33, 390.85)"
      >
        缓存
      </text>
      <text
        class="cls-3"
        transform="matrix(0.9, 0.3, -0.01, 1, 1349.89, 400.7)"
      >
        型
      </text>
      <path
        class="cls-6"
        d="M985.73,481.74l155.3,56.4v32.7l-155.3-56.4Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1137.73,536.74l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M989.73,483.14l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav7" class="is-link">
        <text
          class="cls-8"
          transform="matrix(0.82, 0.3, -0.02, 1, 925.39, 456.38)"
        >
          TeleDB for DDS
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M563.3,327.68l134.52,49.07v32.7L563.3,360.38Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M694.52,375.35l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M567.3,329.08l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav1" class="is-link">
        <text
          class="cls-8"
          transform="matrix(0.91, 0.33, -0.02, 1, 482.95, 296.33)"
        >
          分布式拓展 DRDS
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M712.89,381.8l254.24,93.48V508L712.89,414.5Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M963.83,473.88l3.3,1.4V508l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M716.89,383.2l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav1" class="is-link">
        <text
          class="cls-9"
          transform="matrix(0.94, 0.34, -0.02, 1, 645.54, 354.45)"
        >
          T
          <tspan class="cls-10" x="8" y="0">eleDB for</tspan>
        </text>
        <text
          class="cls-11"
          transform="matrix(0.81, 0.29, -0.02, 1, 720, 383.27)"
        >
          MySQL / OpenGauss
        </text>
        <!--<text class="cls-12" transform="matrix(0.94, 0.34, -0.02, 1, 769.9, 400.85)">T<tspan class="cls-10" x="8" y="0">eleDB for </tspan></text>-->
        <!--<text class="cls-13" transform="matrix(0.81, 0.29, -0.02, 1, 844.36, 427.67)">openGauss）</text>-->
      </router-link>
      <path
        class="cls-6"
        d="M1156,543.8l128,46.53V623L1156,576.5Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1280.63,588.93l3.3,1.4V623l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1160,545.2l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav5" class="is-link">
        <text
          class="cls-8"
          transform="matrix(0.89, 0.32, -0.02, 1, 1073.62, 511.45)"
        >
          TeleDB for HTAP
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M1299.43,595.24,1435.27,645v32.7l-135.84-49.76Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1432,643.6l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1303.43,596.64l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav6" class="is-link">
        <text
          class="cls-8"
          transform="matrix(0.97, 0.35, -0.02, 1, 1221.96, 565.82)"
        >
          MemDB (Redis）
        </text>
      </router-link>
      <path class="cls-6" d="M1464.07,333.31l49.56,18.05v32.7L1464.07,366Z" transform="translate(-88.3 -56.97)"/>
      <path class="cls-7" d="M1510.33,350l3.3,1.4v32.7l-4-1.3" transform="translate(-88.3 -56.97)"/>
      <path class="cls-7" d="M1468.07,334.71l-4-1.4V366l3.3,1.4" transform="translate(-88.3 -56.97)"/>
      <router-link :to="{path:'/case',query: {myTab:'2'}}" class="is-link">
      <text class="cls-8" transform="matrix(0.9, 0.33, -0.02, 1, 1386.61, 303.88)">旅游</text>
      </router-link>
      <path
        class="cls-6"
        d="M1331.8,290.59l80.1,28.94v32.7l-80.1-28.94Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1408.6,318.13l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1335.8,292l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <text
        class="cls-8"
        transform="matrix(0.9, 0.33, -0.02, 1, 1255.33, 260.16)"
      >
        金融
      </text>
      <path
        class="cls-6"
        d="M1206.45,248.32l80.1,28.94V310L1206.45,281Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1283.25,275.86l3.3,1.4V310l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1210.45,249.72l-4-1.4V281l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <text
        class="cls-8"
        transform="matrix(0.9, 0.33, -0.02, 1, 1128.99, 217.89)"
      >
        企业
      </text>
      <path
        class="cls-6"
        d="M849.69,129.35l49.56,18v32.7l-49.56-18Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M896,146l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M853.69,130.75l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <text
        class="cls-8"
        transform="matrix(0.9, 0.33, -0.02, 1, 772.23, 99.92)"
      >
        电信
      </text>
      <path
        class="cls-6"
        d="M976.3,172.26l49.55,18.05V223L976.3,205Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1022.55,188.91l3.3,1.4V223l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M980.3,173.66l-4-1.4V205l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <text
        class="cls-8"
        transform="matrix(0.9, 0.33, -0.02, 1, 898.83, 142.83)"
      >
        政务
      </text>
      <path
        class="cls-6"
        d="M1097.89,213.66l49.56,18v32.7l-49.56-18Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1144.15,230.3l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1101.89,215.06l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <text
        class="cls-8"
        transform="matrix(0.9, 0.33, -0.02, 1, 1020.43, 184.23)"
      >
        物联网
      </text>
      <path
        class="cls-6"
        d="M885.1,672.8,1050.05,733v32.7L885.1,705.5Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1010.75,721.31l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M889.1,674.2l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav8" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.69, 0.25, -0.02, 1, 806.64, 642.37)"
        >
          TeleDB for HBase
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M885.1,627.41l123.72,45.93V706L885.1,660.11Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M1005.52,671.94l3.3,1.4V706l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M889.1,628.81l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav3" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.69, 0.25, -0.02, 1, 806.64, 596.98)"
        >
          TeleDB for OLAP
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M443.3,536.4l96.83,36.17v32.7L443.3,569.1Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M536.83,571.17l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M447.3,537.8l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav16" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.67, 0.24, -0.02, 1, 364.83, 505.97)"
        >
          TeleDB-DCP
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M443.3,579.45l96.83,36.17v32.7L443.3,612.15Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M536.83,614.22l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M447.3,580.85l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav12" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.67, 0.24, -0.02, 1, 364.83, 549.02)"
        >
          TeleDB-DBS
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M551,575.31l96.84,36.17v32.7L551,608Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M644.49,610.08l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M555,576.71l-4-1.4V608l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav11" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.67, 0.24, -0.02, 1, 472.49, 544.88)"
        >
          TeleDB-DAS
        </text>
      </router-link>
      <path
        class="cls-6"
        d="M551,618.36l96.84,36.17v32.7L551,651.06Z"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M644.49,653.13l3.3,1.4v32.7l-4-1.3"
        transform="translate(-88.3 -56.97)"
      />
      <path
        class="cls-7"
        d="M555,619.76l-4-1.4v32.7l3.3,1.4"
        transform="translate(-88.3 -56.97)"
      />
      <router-link to="/detail/nav13" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.67, 0.24, -0.02, 1, 472.49, 587.93)"
        >
          TeleDB-DMS
        </text>
      </router-link>
      <!--<path class="cls-6" d="M885.1,719.51l130.22,47.42v32.7L885.1,752.21Z" transform="translate(-88.3 -56.97)" />-->
      <!--<path class="cls-7" d="M1012,765.53l3.3,1.4v32.7l-4-1.3" transform="translate(-88.3 -56.97)" />-->
      <!--<path class="cls-7" d="M889.1,720.91l-4-1.4v32.7l3.3,1.4" transform="translate(-88.3 -56.97)" />-->
      <!--<router-link to='/detail/nav8' class="is-link">-->
      <!--<text class="cls-16" transform="matrix(0.69, 0.25, -0.02, 1, 806.64, 689.08)">TeleDB for HBase</text>-->
      <!--</router-link>-->
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-1" x="-88.3" y="-56.97" />
      <router-link to="/detail/nav15" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.7, 0.36, -0.06, 1, 370.48, 87.69)"
        >
          <tspan>TeleDB-DAM</tspan>
        </text>
      </router-link>
      <router-link to="/detail/nav11" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.7, 0.36, -0.06, 1, 370.48, 87.69)"
        >
          <tspan x="0" y="28">TeleDB-DTS</tspan>
        </text>
      </router-link>
      <router-link to="/detail/nav14" class="is-link">
        <text
          class="cls-16"
          transform="matrix(0.7, 0.36, -0.06, 1, 370.48, 87.69)"
        >
          <tspan x="0" y="56">TeleDB-GW</tspan>
        </text>
      </router-link>
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-17" transform="translate(83.04 244.84)">云外数据</text>
      <text class="cls-18" transform="translate(102.6 15.46)">
        MySQ
        <tspan class="cls-19" x="50" y="0">L</tspan>
      </text>
      <text class="cls-20" transform="translate(170.27 39.46)">
        SQ
        <tspan class="cls-19" x="23.12" y="0">L</tspan>
        <tspan x="31.43" y="0" xml:space="preserve">Server</tspan>
      </text>
      <text class="cls-1" x="-88.3" y="-56.97" />
      <text class="cls-18" transform="translate(195.95 79.67)">Oracle</text>
      <text class="cls-20" transform="translate(190.86 123.39)">DB2</text>
      <text class="cls-18" transform="translate(93.22 162.46)">
        PostgreSQ
        <tspan class="cls-19" x="88.04" y="0">L</tspan>
      </text>
      <text class="cls-18" transform="translate(37.31 136.96)">Redis</text>
      <text class="cls-18" transform="translate(0 49.46)">MongoDB</text>
      <text class="cls-18" transform="translate(10 96.75)">HBase</text>
      <text
        class="cls-21"
        transform="matrix(0.84, 0.23, -0.03, 1, 1518.51, 259.13)"
      >
        云上应用
      </text>
      <text
        class="cls-22"
        transform="matrix(0.96, 0.26, -0.03, 1, 1436.88, 518.29)"
      >
        云上DB
      </text>
      <text
        class="cls-23"
        transform="matrix(0.97, 0.31, -0.03, 1, 262.7, 373.27)"
      >
        生态工具
      </text>
      <text
        class="cls-24"
        transform="matrix(0.9, 0.34, -0.06, 1, 870.12, 552.42)"
      >
        云上O
        <tspan class="cls-25" x="67.15" y="0">L</tspan>
        <tspan class="cls-26" x="80.71" y="0">AP</tspan>
      </text>
    </svg>
    <svg
      class="run"
      width="1603px"
      height="741px"
      viewBox="0 0 1603 741"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path id="Path-1" d="M695.15,179.52v53.66l-57.96,60.15 " />
        <path
          id="Path-2"
          d="M997.741173 286.946005 997.741173 339.776895 940.576667 401.128186 948.315817 406.171706"
        />
        <path
          id="Path-3"
          d="M1171.28174 346.558856 1167.32683 399.221291 1113.13422 465.002102 1097.91592 458.537351"
        />
        <path
          id="Path-4"
          d="M1333.78442 405.780479 1329.22136 455.455089 1277.29631 523.892464 1268.23339 519.858593"
        />
        <animateMotion
          id="anim1"
          xlink:href="#oval"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-1" />
        </animateMotion>
        <image
          id="oval"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim2"
          xlink:href="#oval2"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-2" />
        </animateMotion>
        <image
          id="oval2"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval2"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim3"
          xlink:href="#oval3"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-3" />
        </animateMotion>
        <image
          id="oval3"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval3"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim4"
          xlink:href="#oval4"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-4" />
        </animateMotion>
        <image
          id="oval4"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval4"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'text-link'
}
</script>

<style scoped lang="scss">
.rtext {
  position: relative;
  z-index: 1;
}
.run {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.cls-1,
.cls-16,
.cls-17,
.cls-18,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-23,
.cls-24,
.cls-4,
.cls-5,
.cls-6,
.cls-8,
.cls-9 {
  isolation: isolate;
}

.cls-2,
.cls-3 {
  font-size: 16px;
}
.st0,
.st1,
.st2,
.st3,
.st4,
.st5,
.st6,
.st7,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17,
.cls-18,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-23,
.cls-24,
.cls-3,
.cls-4,
.cls-5,
.cls-8,
.cls-9 {
  fill: #fff;
}

.cls-2,
.cls-3,
.cls-4,
.cls-5 {
  font-family: PingFangSC-Medium-GBpc-EUC-H, PingFang SC;
}

.cls-11,
.cls-13,
.cls-20,
.cls-4,
.cls-8 {
  font-size: 16px;
}

.cls-5 {
  font-size: 16px;
}

.cls-6 {
  fill-rule: evenodd;
  opacity: 0.4;
}

.cls-7 {
  fill: none;
  stroke: #faad15;
}

.cls-11,
.cls-13,
.cls-16,
.cls-8 {
  font-family: PingFangHK-Medium-B5pc-H, PingFang HK;
}

.cls-12,
.cls-14,
.cls-15,
.cls-9 {
  font-size: 16px;
}

.cls-12,
.cls-14,
.cls-15,
.cls-18,
.cls-20,
.cls-9 {
  font-family: Helvetica;
}

.cls-12,
.cls-9 {
  letter-spacing: -0.11em;
}

.cls-10,
.cls-15 {
  letter-spacing: 0em;
}

.cls-13 {
  letter-spacing: 0em;
}

.cls-16,
.cls-18 {
  font-size: 18px;
}

.cls-17 {
  font-size: 24px;
}

.cls-17,
.cls-21,
.cls-22,
.cls-23,
.cls-24 {
  font-family: AlibabaPuHuiTi-Bold, Alibaba PuHuiTi;
  font-weight: 700;
}

.cls-19 {
  letter-spacing: -0.04em;
}

.cls-21 {
  font-size: 26.06px;
}

.cls-22 {
  font-size: 24.01px;
}

.cls-23 {
  font-size: 23.98px;
}

.cls-24 {
  font-size: 24.73px;
}

.cls-25 {
  letter-spacing: 0.02em;
}

.cls-26 {
  letter-spacing: 0em;
}
.is-link:hover {
  .cls-11,
  .cls-12,
  .cls-13,
  .cls-14,
  .cls-15,
  .cls-16,
  .cls-17,
  .cls-18,
  .cls-2,
  .cls-20,
  .cls-21,
  .cls-22,
  .cls-23,
  .cls-24,
  .cls-3,
  .cls-4,
  .cls-5,
  .cls-8,
  .cls-9 {
    fill: $--color-primary;
  }
}
</style>
